<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.img-bg {
				background: gray;
				width: 400px;
				height: 400px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}

			.img-bg img {
				max-width: 400px;
				max-height: 400px;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<div class="col-1">
				<section class="card">
					<header>图像</header>
					<main>
						<div>
							<select id="ddlImages" onchange="onSelectedImage()">
								<option disabled="disabled" selected="selected">选择图片</option>
								<option value="../../share/res/003.jpg">图片1</option>
								<option value="../../share/res/004.jpg">图片2</option>
								<option value="../../share/res/005.jpg">图片3</option>
								<option value="../../share/res/009.jpg">图片4</option>
								<option value="../../share/res/010.jpg">图片5</option>
								<option value="https://y.qq.com/music/photo_new/T001R500x500M000001fNHEf1SFEFN.jpg">图片6</option>
							</select>
							<span id="log1"></span>
							<span id="log2"></span>
						</div>
						<br />
						<div class="img-bg">
							<img id="imgPreview" src="" onload="onImageResize()">
						</div>
					</main>
				</section>
			</div>
			<div class="col-1">
			</div>
		</div>
		<script>
			function onSelectedImage() {
				$("#log2").text($("#ddlImages").val());
				// $("#imgPreview").attr("src", $("#ddlImages").val() + "?t=" + new Date().getTime());
				$("#imgPreview").attr("src", $("#ddlImages").val());
			}

			function onImageResize() {
				let jo = $("#imgPreview");
				let pos = jo.position();
				$("#log1").text(parseInt(pos.left) + "," + parseInt(pos.top) + "," + jo.width() + "," + jo.height());
			}
		</script>
	</body>
</html>
